// 获取元素
let adds = document.querySelectorAll(".add");
let subs = document.querySelectorAll(".sub");
let inputs = document.querySelectorAll("input");
let totalNum = document.querySelector(".total-quantity span");
let totalPrice = document.querySelector(".total span");

/*----- 封装函数 -----*/
// let arr = [1, 1, 2]
let priceArr = [8399, 10769, 9888, 8599]
function getResult (arr) {
  let totalNum = 0; // 计算有多少台手机
  let totalPrice = 0; // 计算总价多少
  arr.forEach(function (num, index) {
    totalNum += num;
    totalPrice += priceArr[index] * num // 计算单价乘数量
  })
  return { totalNum: totalNum, totalPrice: totalPrice } // 返回对象
}

// 加法操作
adds.forEach(function (add, i) {
  add.addEventListener("click", function () {
    // console.log(1);
    let num = parseInt(inputs[i].value) + 1 // 取出数量，对应框的数量变化+1
    inputs[i].value = num;
    let arr = []
    inputs.forEach(function (input) {
      arr.push(Number(input.value)) // 将对应的数量加入空数组arr
    })
    console.log(arr);
    let obj = getResult(arr); // 调用函数
    console.log(obj);
    // 展示到页面上
    totalNum.textContent = obj.totalNum;
    totalPrice.textContent = obj.totalPrice;
  })
})

// 减法操作
subs.forEach(function (sub, i) {
  sub.addEventListener("click", function () {
    if (inputs[i].value == 0) { // 边界问题处理
      return  // 如果减去按钮等于0，就直接返回 终止运行
    }
    // console.log(1);
    let num = parseInt(inputs[i].value) - 1 // 取出数量，对应框的数量变化+1
    inputs[i].value = num;
    let arr = []
    inputs.forEach(function (input) {
      arr.push(Number(input.value))
    })
    console.log(arr);
    let obj = getResult(arr);
    console.log(obj);
    // 展示到页面上
    totalNum.textContent = obj.totalNum;
    totalPrice.textContent = obj.totalPrice;
  })
})

// 输入框输入
inputs.forEach(function (input, i) {
  input.addEventListener("input", function () {  // 当输入框发生变化时改变
    console.log(inputs[i].value);
    let num = parseInt(inputs[i].value);
    if (parseInt(this.value) <= 0 || isNaN(parseInt(this.value))) {
      //判断如果为负值，替换成0
      this.value = 0
    }
    let arr = []
    inputs.forEach(function (input) {
      arr.push(Number(input.value))
    })
    console.log(arr);
    let obj = getResult(arr);
    console.log(obj);
    // 展示到页面上
    totalNum.textContent = obj.totalNum;
    totalPrice.textContent = obj.totalPrice;
  })
})